<template>
  <div class="home-page">
    <!-- 搜索框 -->
    <van-search
      readonly
      placeholder="请输入搜索内容"
      class="search-bar"
      @click.native="$router.push('/search/')"
    />
    <!-- 轮播区域 -->
    <div class="nav">
      <van-swipe
        class="banner"
        :autoplay="3000"
        loop
        indicator-color="white"
        :show-indicators="false"
        :height="bannerHeight"
        ref="swipe"
      >
        <van-swipe-item v-for="banner in bannerList" :key="banner.recommend.id" @click="onSwipeItemClick(banner.recommend)">
          <img v-lazy="banner.recommend.image" class="banner-image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 6个小图标展示 -->
      <van-row
        type="flex"
        justify="space-around"
        class="text-center icon-group"
        style="margin-bottom: 15px;"
      >
        <van-col :span="6" class="tap-active" @click.native="$router.push('/adviser/list/')">
          <i class="icon icon-tg" style="margin-left:10px"></i>
          <p>投顾</p>
        </van-col>
        <van-col :span="6" class="tap-active" @click.native="$router.push('/portfolio/list')">
          <i class="icon icon-portfolio"></i>
          <p>组合</p>
        </van-col>
        <van-col :span="6" class="tap-active" @click.native="$router.push('/view/list/')">
          <i class="icon icon-view"></i>
          <p>观点</p>
        </van-col>
        <van-col :span="6" class="tap-active" @click.native="$router.push('/live/list')">
          <i class="icon icon-live"></i>
          <p>直播</p>
        </van-col>
      </van-row>
      <van-row
        type="flex"
        justify="space-around"
        class="text-center icon-group"
      >
        <van-col :span="6" class="tap-active" @click.native="$router.push('/tips/list/')">
          <i class="icon icon-service"></i>
          <p>锦囊</p>
        </van-col>
        <van-col :span="6" class="tap-active" @click.native="$router.push('/user/')">
          <i class="icon icon-me"></i>
          <p>我的</p>
        </van-col>
        <van-col :span="6"></van-col>
        <van-col :span="6"></van-col>
      </van-row>
    </div>
    <!-- 最火直播区域 -->
    <div class="block">
      <van-cell title="最火直播" is-link to="/live/list/" />
      <!-- 封装的小卡片 -->
      <horizontal-scroll-list>
        <horizontal-scroll-item v-for="live in liveList" :key="live.product.id">
          <div class="live" @click="$router.push(`/live/stage/${live.product.id}`)">
            <div class="live-header">
              <div class="info">
                <van-image lazy-load  :src="live.product.tgBaseInfo.avatar" round width="26px" height="26px"
                  @click.native.stop="$router.push(`/adviser/detail/${live.product.tgBaseInfo.id}/`)"
                 />
                <span style="margin-left: 3px;">{{live.product.tgBaseInfo.name}}</span>
              </div>
              <div class="status" v-if="live.product.status === 1">
                <i class="icon icon-living"></i>
                <span style="color: #eb4339;">直播中</span>
              </div>
              <span class="status" v-if="live.product.status === -1">
                <i class="icon icon-live-over"></i>
                <span>已结束</span>
              </span>
            </div>
            <div class="live-body">
              <h4>{{live.product.name}}</h4>
              <p class="van-ellipsis">{{live.product.summary}}</p>
            </div>
            <div class="live-bottom">
              <span>{{live.product.readCount}}人观看</span>
              <span>{{live.product.likeCount}}赞</span>
            </div>
          </div>
        </horizontal-scroll-item>
      </horizontal-scroll-list>
    </div>
    <div class="block">
      <van-cell title="精英投顾" is-link to="/adviser/list/" />
      <horizontal-scroll-list>
        <horizontal-scroll-item v-for="adviser in adviserList" :key="adviser.product.id">
          <div class="adviser text-center" @click="$router.push(`/adviser/detail/${adviser.product.id}`)">
            <div class="avatar-wrapper">
              <i v-if="adviser.product.type === 1" class="icon icon-good"></i>
              <van-image lazy-load :src="adviser.product.tgBaseInfo.avatar" round width="60px" height="60px" />
            </div>
            <p>{{adviser.product.tgBaseInfo.name}}</p>
          </div>
        </horizontal-scroll-item>
      </horizontal-scroll-list>
    </div>
    <div class="block">
      <van-cell title="精选组合" is-link to="/portfolio/list/" />
      <horizontal-scroll-list>
        <horizontal-scroll-item v-for="(portfolio, i) in portfolioList" :key="portfolio.product.id">
          <div class="portfolio text-center" :class="`color${(i) % 3}`" @click="$router.push(`/portfolio/detail/${portfolio.product.id}`)">
            <h4 class="van-ellipsis">{{portfolio.product.name}}</h4>
            <h2 :class="portfolio.product.rate | numberColor">{{portfolio.product.rate | numberFormat('0.00%')}}</h2>
            <p>当前收益</p>
            <div>查看详情</div>
          </div>
        </horizontal-scroll-item>
      </horizontal-scroll-list>
    </div>
    <div class="block">
      <van-cell title="热门观点" is-link to="/view/list/" />
      <!-- 循环生成观点 -->
      <ul class="new-view-list">
        <li
         class="new-view-item tap-active van-hairline--bottom "
         v-for="item in viewList" :key="item.product.id"
         @click="$router.push(`/view/detail/${item.product.id}/`)"
        >
          <div class="view-header">
            <van-image lazy-load  width="35px" height="35px" round :src="item.product.tgBaseInfo.avatar" class="avatar" @click.native.stop="$router.push(`/adviser/detail/${item.product.tgBaseInfo.id}/`)" />
            <div class="info">
              <p class="name">{{item.product.tgBaseInfo.name}}</p>
            </div>
            <div class="price">
              <span v-if="item.product.costType === 1">免费</span>
            </div>
          </div>
          <h4 class="van-ellipsis">{{item.product.name}}</h4>
          <p class="van-multi-ellipsis--l2">
            {{item.product.summary}}
          </p>
          <div class="view-footer">
            <span class="time">{{item.product.time | publishTimeFormat}}</span>
            <span class="read-count">{{item.product.readCount}}阅读</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Search, Row, Col, Swipe, SwipeItem, Cell } from "vant";
import HorizontalScrollList from '../components/HorizontalScrollList.vue';
import HorizontalScrollItem from '../components/HorizontalScrollItem.vue';
import { queryRecommend } from '../api/common';
import PullToRefresh from '../utils/pull_to_refresh'

// 推荐位类型
// 1: 投顾首页直播 2: 投顾首页观点, 3: 投顾首页组合, 4: 投顾首页锦囊,
// 5: 投顾首页视频, 6: 投顾首页问答, 9: 投顾首页投顾推荐, 10: 投顾首页banner
// 11: APP首页直播 12: APP首页观点, 13: APP首页组合, 14: APP首页锦囊,
// 15: APP首页视频, 16: APP首页问答, 19: APP首页投顾推荐, 20: APP首页banner
const RECOMMEND_TYPE = {
  LIVE: 1,
  VIEW: 2,
  PORTFOLIO: 3,
  ADVISER: 9,
  BANNER: 10
}

// 业务类型 1: 直播, 2: 观点, 3: 组合, 4: 锦囊, 5: 视频, 6: 问答 10: 投顾, 99: H5链接
const PRODUCT_TYPE = {
  LIVE: 1,
  VIEW: 2,
  PORTFOLIO: 3,
  ADVISER: 10,
  H5: 99
}

export default {
  components: {
    [Search.name]: Search,
    [Row.name]: Row,
    [Col.name]: Col,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Cell.name]: Cell,
    HorizontalScrollList,
    HorizontalScrollItem
  },
  mixins: [PullToRefresh],
  data() {
    return {
      bannerHeight: 130,  // 定义了海报的高度
      bannerList: [],
      viewList: [],
      liveList: [],
      portfolioList: [],
      adviserList: [],
      showBanner: false,
    };
  },

  mounted() {
    this.$setTitle('投顾');
    this.init();
    this.$bus.$on('onPullDownRefresh', () => {
      setTimeout(() => {
        this.init().then(() => {
          this.$bus.$emit('stopPullDownRefresh');
        });
      }, 500)
    });
  },

  methods: {
    init() {
      /* 查询推荐 */
      this.queryRecommend(RECOMMEND_TYPE.BANNER, 'bannerList', {
        includeExt: 1,
        size: 999
      }).then(() => {
        console.log(this.bannerList);
        this.showBanner = !!this.bannerList.length;
      });
      this.queryRecommend(RECOMMEND_TYPE.LIVE, 'liveList', {
        size: 999
      });
      this.queryRecommend(RECOMMEND_TYPE.ADVISER, 'adviserList', {
        size: 999
      });
      this.queryRecommend(RECOMMEND_TYPE.PORTFOLIO, 'portfolioList');
      this.queryRecommend(RECOMMEND_TYPE.VIEW, 'viewList');
      return this.$nextTick().then(() => this.bannerHeight = this.getHeight());
    },
    getHeight() {
      const aspectRatio = 130 / 351 ;   
      return this.$refs['swipe'].$el.offsetWidth * aspectRatio;  // 自适应高度
    },

    // 再次封装可以接受三个参数
    async queryRecommend(type, key, options) {
      try {
        const data = await queryRecommend({
          recommendType: type,
          offset: 0,
          size: 3,
          ...options
        });
        this[key] = data.result;
      } catch (error) {
        console.error(error);
      }
    },

    onSwipeItemClick(data) {
      switch(data.productType) {
        case PRODUCT_TYPE.LIVE:
          return this.$router.push(`/live/stage/${data.id}`);
        case PRODUCT_TYPE.VIEW:
          return this.$router.push(`/view/detail/${data.id}`);
        case PRODUCT_TYPE.PORTFOLIO:
          return this.$router.push(`/portfolio/detail/${data.id}`);
        case PRODUCT_TYPE.ADVISER:
          return this.$router.push(`/adviser/detail/${data.id}`);
        case PRODUCT_TYPE.H5:
          return location.href = data.h5;
        default:
          throw new Error(`Unkonwn productType ${data.productType}`);
      }
    }
  }
};
</script>

<style lang="less">
.home-page {
  padding-top: 54px;

  .search-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .nav {
    background: #fff;
    padding-bottom: 5px;
    padding-top: 10px;
    .icon-group {
      background-color: #fff;
      color: #5e616b;
      font-size: 12px;

      p {
        margin: 10px 0;
      }

      .icon {
        width: 37px;
        height: 37px;
        margin-left: 5px;
      }

      .icon-live {
        background-image: url("../assets/icon_live.png");
      }

      .icon-me {
        background-image: url("../assets/icon_me.png");
      }

      .icon-view {
        background-image: url("../assets/icon_view.png");
      }

      .icon-tg {
        background-image: url("../assets/icon_tg.png");
      }

      .icon-portfolio {
        background-image: url("../assets/icon_portfolio.png");
      }

      .icon-service {
        background-image: url("../assets/icon_service.png");
      }
    }

    .banner {
      margin: 15px;
      margin-top: 0px;
      border-radius: 5px;
      background-color: #f5f5f6;

      .banner-image, .van-swipe-item {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }

  }

  .van-cell__title span {
    font-size: 18px;
    color: #2b313d;
    font-weight: bold;
  }

  .block {
    background: #fff;
    margin-top: 10px;
    padding-bottom: 10px;

    .live {
      margin: 15px;
      padding: 15px;
      box-shadow: 0 2px 9px 0 rgba(0,0,0,0.10);
      border-radius: 8px;
      color: #9d9ea7;
      font-size: 14px;
      line-height: 1.5;
      width: 212px;

      .live-header {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .info {
          display: flex;
          align-items: center;

          span {
            max-width: 100px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }

        .status {
          flex: 1;
          text-align: right;
          font-size: 12px;

          * {
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      .live-body {
        h4 {
          color: #2b3e3d;
          font-size: 16px;
          margin-bottom: 5px;
          min-height: 24px;
        }

        p {
          color: #5e616b;
          min-height: 21px;
        }
      }

      .live-bottom {
        display: flex;
        margin-top: 10px;
        font-size: 12px;

        span:last-child {
          flex: 1;
          text-align: right;
        }
      }
    }

    .adviser {
      margin: 15px 20px;

      .avatar-wrapper {
        position: relative;

        .van-image {
          border: 2px solid #f4f5e7;
        }
      }

      .icon-good {
        width: 18px;
        height: 18px;
        background-image: url('../assets/icon_good@2x.png');
        position: absolute;
        right: 50%;
        bottom: 3px;
        z-index: 2;
        transform: translateX(30px);
      }

      p {
        font-size: 14px;
        color: #2b313d;
        font-weight: bold;
        margin-top: 5px;
      }
    }

    .portfolio {
      background-size: 100% 100%;
      background-repeat: no-repeat;
      padding: 15px 20px;
      margin: 12px;
      line-height: 1.5;
      width: 142px;

      p {
        color: #9d9ea7;
        font-size: 14px;
      }

      div {
        color: #fff;
        border-radius: 12px;
        font-size: 12px;
        margin: 25px 10px 0 10px;
        line-height: 22px;
      }

      &.color0 {
        background-image: url('../assets/bg3.png');
        div {
          background-color: #eb4339;
        }
      }
      &.color1 {
        background-image: url('../assets/bg1.png');
        div {
          background-color: #ffbf64;
        }
      }
      &.color2 {
        background-image: url('../assets/bg2.png');
        div {
          background-color: #bd91e5;
        }
      }
    }

    .new-view-list {
      background: #fff;
      .new-view-item {
        padding: 15px;
        color: #5d667a;

        h4 {
          margin: 10px 0;
          color: #000;
        }

        p {
          font-size: 14px;
        }

        .view-header {
          display: flex;
          align-items: center;
          font-size: 13px;
          line-height: 1.3;

          .name {
            font-size: 14px;
            color: #121d32;
          }

          .price {
            flex: 1;
            text-align: right;

            span {
              color: #fff;
              background-color: #eb4339;
              border-radius: 2px;
              padding: 2px 5px;
              font-size: 12px;
            }
          }

          .avatar {
            display: inline-block;
            margin-right: 10px;
          }
        }

        .view-footer {
          display: flex;
          font-size: 12px;
          color: #919bb2;
          margin-top: 10px;
          .read-count {
            flex: 1;
            text-align: right;
          }
        }
      }
    }

    .horizontal-scoll-item {
      .live {
        margin-left: 7.5px;
        margin-right: 7.5px;
      }

      &:first-child {
        .live {
          margin-left: 15px;
        }
      }

      &:last-child {
        .live {
          margin-right: 15px;
        }
      }
    }
  }
}
</style>
